<template>
    <div class="divCommomStyle">
      <div class="content">
        <div class="left">
            <div class="titleBox">
                <div class="name">用户总量</div>
                <div class="value">3300<b>起</b></div>
            </div>
            <div class="barChart">
                <div id="barChart1" :style="{width: '100%', height: '100%'}"></div>
            </div>
        </div>
        <div class="right">
            <div class="titleBox">
                <div class="name">用户总量</div>
                <div class="value">3300<b>起</b></div>
            </div>
            <div class="barChart">
                <div id="barChart2" :style="{width: '100%', height: '100%'}"></div>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      barChart1: null,
      barChart2: null
    }
  },
  mounted () {
    this.initBarChart('barChart1')
    this.initBarChart('barChart2')
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.barChart1) {
      this.barChart1.resize()
    }
    if (this.barChart2) {
      this.barChart2.resize()
    }
  },
  methods: {
    initBarChart (chartBoxId) {
      let option = {
        title: {
          text: '',
          bottom: 10,
          left: 'center',
          textStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '5%',
          width: '90%',
          height: '90%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
              color: '#0a2348'
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#7e8aa9'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#0a2348'
              }
            },
            data: ['上海', '杭州', '重庆', '成都', '北京', '南京']
          }
        ],
        yAxis: {
          type: 'value',
          name: '',
          nameTextStyle: {
            fontSize: 14,
            color: '#0a2348'
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#7e8aa9'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#0a2348'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#0a2348'
            }
          }
        },
        series: [{
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [
            {
              name: '低能见度1',
              value: '70',
              itemStyle: {
                color: '#1F78B4'
              }
            },
            {
              name: '低能见度2',
              value: '50',
              itemStyle: {
                color: '#A6CEE3'
              }
            },
            {
              name: '低能见度3',
              value: '30',
              itemStyle: {
                color: '#B2DF8A'
              }
            },
            {
              name: '低能见度4',
              value: '25',
              itemStyle: {
                color: '#33A02C'
              }
            },
            {
              name: '低能见度5',
              value: '15',
              itemStyle: {
                color: '#FB9A99'
              }
            },
            {
              name: '低能见度6',
              value: '5',
              itemStyle: {
                color: '#E31A1C'
              }
            }
          ]
        }]
      }
      let barChart = ''
      if (chartBoxId === 'barChart1') {
        barChart = this.barChart1
      } else {
        barChart = this.barChart2
      }
      barChart = this.$echarts.init(document.getElementById(chartBoxId))
      barChart.setOption(option)
      window.addEventListener('resize', () => {
        barChart.resize()
      })
    }
  }
}
</script>

<style scoped>
.divCommomStyle{
  display: flex;
  justify-content: center;
  align-items: center;
}
.divCommomStyle .content{
  display: flex;
  justify-content: space-between;
}
.divCommomStyle .content .left,.divCommomStyle .content .right{
    width:48%;
}
.divCommomStyle .content .titleBox{
    display: flex;
    width:99%;
    height: 25%;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #053a67;
    overflow: hidden;
}
.divCommomStyle .content .barChart{
    height: 73%;
    margin-top: 5px;
}
.divCommomStyle .content .titleBox div{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.divCommomStyle .content .titleBox div.name{
    flex: 3;
    background: #28ce57;
    color: #fff;
    font-size: 1vh;
    /* writing-mode: vertical-lr;
    writing-mode: tb-lr; */
}
.divCommomStyle .content .titleBox div.value{
    flex: 7;
    line-height: 100%;
    background: #0a2043;
    color: #25c255;
    font-size: 26px;
    font-weight: bold;
}
.divCommomStyle .content .titleBox div.value b{
    font-size: 12px;
    font-weight: normal;
}

.divCommomStyle .content .right .titleBox div.name{
    background: #faac04;
}
.divCommomStyle .content .right .titleBox  div.value{
    color: #faac04;
}
</style>
